<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        body{
            background-color: #000000;
        }
    </style>
</head>
<body>
    <!-- 图片渐变 -->
    <div class="gradient">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo"></img>
    </div>
    <style>
        .gradient{
            width:300px;
            height:100px;
            position: relative; /*相对定位 重点*/
        }
        .gradient::after{
            content: ""; /*伪元素必须设置content属性*/
            position: absolute; /*相对gradient绝对定位 重点*/
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*
                渐变 linear-gradient
                    transparent：透明
            */
            background: linear-gradient(to right,#000,transparent);
            z-index: -1;
        }
        .gradient img{
            width: 100%;height: 100%;
        }
    </style>

    <!-- 倒影，反映 -->
    <img class="reflect" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo"></img>
    <style>
        .reflect{
            width:300px;
            height:100px;
            /*
                图片倒影：-webkit-box-reflect(非标准)
                    above,below,left,right：倒影的位置
            */
            -webkit-box-reflect: below 10px linear-gradient(to left top, transparent,#000);
        }
    </style>
</body>
</html>
